
import { useTranslation } from 'react-i18next'
import { Link, useNavigate } from "react-router-dom";
import HeaderTitle from "../login/header";
import style from "./index.module.less"
import "./index.css"
import { EyeInvisibleOutline, EyeOutline } from "antd-mobile-icons"
import React, { Fragment, useState, useEffect, useRef } from 'react'

import DRAGONBG from '../../static/1710916284653-24ii0g5s7i1.png'
import rightBottom from '../../static/o_1di4nsvan119d1bt859616ls73ea.png'
import rightTop from '../../static/1710916284654-66qoport6zd.png'
import bg1 from '../../static/1626943712098-8sa84u4fd6b.png'

import btn from '../../static/1626944436624-0ql4qr7rilri.png'
import blocksbg from '../../static/1626944011951-7saq2qqaw1t.png'
import blocksbg2 from '../../static/1626944011959-g0b3mlarvnh.png'
import line from '../../static/1626943712099-7rm0lp3qu3h.png'
import xx2 from '../../static/xx2.png'
import xx1 from '../../static/xx1.png'
// import x1 from '../../static/1x.png'
// import x2 from '../../static/2x.png'
import x3 from '../../static/11403be522ed71950b9d.png'
import { LuckyWheel, LuckyGrid } from '@lucky-canvas/react'


import {
	Form,
	Input,
	Checkbox,
	Button,
	Dialog,
	Toast,
	Popup
} from 'antd-mobile'
import { zhuanpan, ajax_zhuan, ajax_zhuanpan_record, ajax_zhuanpan_get, getinfo } from "@/apis/user.js"
import { LeftOutline } from "antd-mobile-icons"

import toptag from "../../static/top-tag.png"
let goE = 0
const Promotionlist = (props) => {
	const [visible, setVisible] = React.useState(false);
	const BASE_URL = import.meta.env.VITE_BASE_URL;
	const [flag, setFlag] = useState(false);
	const [activitylist, setActivitylist] = useState([]);
	const [list, setList] = useState([]);
	const [listOne, setListOne] = useState([]);
	const navigate = useNavigate()
	const [isSpinning, setIsSpinning] = useState(false);
	const [goBtn, setGoBtn] = useState(true);
	const [goEffca, setGoEffca] = useState(false);
	const [imgend, setImgend] = useState(false);
	const [result, setResult] = useState(null);
	const [w, setW] = useState('');
	const [type, setType] = useState(1);
	const [h, setH] = useState(512);
	const [defaultConfig, setDefaultConfig] = useState({ gutter: '2' });
	const [defaultStyle, setDefaultStyle] = useState({ background: '#ff0000' });
	const myLucky = useRef()
	const [blocks] = useState([

		{
			padding: '20px',
			background: '#b7a57a',
			imgs: [{ rotate: true, src: blocksbg2, width: '100%', height: '100%' }],

		},
		{
			padding: '0px',
			background: '#b7a57a',
			imgs: [{ rotate: true, src: blocksbg, width: '100%', height: '100%' }],

		}

	])
	const [prizes, setPrizes] = useState([])
	const [buttons] = useState([
		{
			radius: '40%',
			pointer: true,
			imgs: [
				{
					src: xx2,
					width: '60%',
					height: '60%',
					top: '-60%',
				},
				{
					src: xx1,
					width: '17px',
					height: '38px',
					top: '-100%',
				}
			]
		},
	])
	useEffect(() => {
		getuser()
		// myLucky.current.init(defaultConfig);
		// setW(window.innerWidth)
		// setFlag(true);
		let proCode = localStorage.getItem('proCode')
		let code = localStorage.getItem('code')
		let gameType = localStorage.getItem('gameType')
		zhuanpan({
			product_type: proCode,
			code: code,
			game_type: gameType
		}).then(res => {

			let tArr = []
			if (res && res.status && res.status.errorCode === 0) {
				setListOne(res.data.data)
				const tArr = res.data.data.map(element => {
					return {
						background: 'rgba(0,0,0,.1)',
						fonts: [{
							text: element.name,
							top: '70%',
							fontColor: '#e7ce94',
							fontSize: '12px'
						}],
						imgs: [{
							src: element.image,
							width: '40',
							height: '40',
							top: '20%'
						}]
					};
				});
				setPrizes(tArr)
			}
		})

		setTimeout(() => {
			if (window.scrollTo) {
				window.scrollTo(0, 0);
			} else if (document.body.scrollTop) {
				document.body.scrollTop = 0;
			} else {
				document.documentElement.scrollTop = 0;
			}
			document.getElementById('root').scrollIntoView(true);
			document.getElementById('body').scrollIntoView(true);
		}, 0)
		return () => { }
	}, []);
	const getuser = () => {
		getinfo().then(res => {
			if (res.status.errorCode == 0) {
				if (res.data.member.zhuanpan > 0) {
					goE = 1
				} else {
					goE = 0
				}
			}
		})
	}
	const go = () => {
		if (!goBtn) return
		setGoBtn(false)
		let proCode = localStorage.getItem('proCode')
		let code = localStorage.getItem('code')
		let gameType = localStorage.getItem('gameType')
		// getinfo().then(res => {
		// 	if (res.status.errorCode == 0) {
		// 		 
		if (goE == 1) {
			myLucky.current.play()
			ajax_zhuan({
				product_type: proCode,
				code: code,
				game_type: gameType
			}).then(res => {
				if (res && res.status && res.status.errorCode === 0) {
					setTimeout(() => {
						// const index = Math.random() * 6 >> 0
						myLucky.current.stop(res.data.index)
						getuser()
						setGoBtn(true)
					}, 2500)
				}
			})
		} else {
			setGoBtn(true)
			Toast.show({
				content: t('login.title54'),
			})
		}
	}
	const backFun = () => {
		navigate(-1);
	}
	const end = (params, txt) => {
		Dialog.alert({
			content: params.fonts[0].text,
			closeOnMaskClick: true,
		})
		let proCode = localStorage.getItem('proCode')
		let code = localStorage.getItem('code')
		let gameType = localStorage.getItem('gameType')
		ajax_zhuanpan_record({
			product_type: proCode,
			code: code,
			game_type: gameType
		}).then(res => {
			setList(res.data.data)
		})
	}
	const showDom = () => {
		let proCode = localStorage.getItem('proCode')
		let code = localStorage.getItem('code')
		let gameType = localStorage.getItem('gameType')
		ajax_zhuanpan_record({
			product_type: proCode,
			code: code,
			game_type: gameType
		}).then(res => {
			setList(res.data.data)
		})
		setVisible(true)
	}
	const { t } = useTranslation();
	return (
		<React.Fragment>
			<div className={style['newadd']}>
				<div className={style['header-title']}>
					<div className={style['right']} onClick={() => backFun()}>
						<LeftOutline style={{ cursor: 'pointer' }} className={style['icon']} />
					</div>
					<div className={style['title']}>转盘</div>
					<div className={style['right']} onClick={() => backFun()}>首页</div>
				</div>
				<div className={style['glmain']}>
					<img src={DRAGONBG} alt="" className={style['img0']} />
					<img src={rightBottom} alt="" className={style['img1']} onClick={showDom} />
					<img src={rightTop} alt="" className={style['img2']} onClick={showDom} />
					{/* <div className={style['t1']}>累积0次参与</div> */}
					<LuckyWheel
						ref={myLucky}
						width='100vw'
						defaultStyle={defaultStyle}
						defaultConfig={defaultConfig}
						height='100vw'
						blocks={blocks}
						prizes={prizes}
						buttons={buttons}
						onStart={go}
						onEnd={end}
					/>
				</div>
				<Popup
					visible={visible}
					position="bottom"
					mask
					onMaskClick={() => {
						setVisible(false)
					}}
					onClose={() => setVisible(false)}
				>
					<div style={{ padding: 20 }} className='active_mask'>

						<div className='active_head'>
							{/* <p className=''></p>
							<p></p> */}
							<ul>
								<li className={type == 1 ? 'active ' : ''} onClick={() => setType(1)}>活动说明</li>
								<li className={type == 2 ? 'active ' : ''} onClick={() => setType(2)}>我的奖品</li>
							</ul>
						</div>
						<div id='activeCon' className='atxt' hidden={type == 2}>
							<div className="rule_active_prize  rule_active" priority="“10”">
								<ul className="rule_active_prize_content rule_active_content">
									{
										listOne.length > 0 && listOne.map((item, index) => (
											<li className="rule_active_prize_bottom prizeLevel-8" data-content={index + 1} key={index}>
												<span className="rule_active_prize_level">{item.name}</span>
												<span className="rule_active_prize_text">{item.money}</span>
											</li>
										))
									}
								</ul>
							</div>
						</div>
						<div id='activeCon' className='atxt afterNone' hidden={type == 1}>
							<div className="rule_active_prize  rule_active" priority="“10”">
								<ul className="rule_active_prize_content rule_active_content">								{
									list.length > 0 && list.map((item, index) => (
										<li className="rule_active_prize_bottom prizeLevel-8" data-content={index + 1} key={index}>
											<span className="rule_active_prize_level">我的奖品</span>
											<span className="rule_active_prize_text">{item.describe}</span>
										</li>
									))
								}
								</ul>
							</div>
						</div>
					</div>
				</Popup>
			</div>
			{
				!imgend && <div className='pix' onClick={() => setImgend(true)}>
					<img src={x3} alt="" className='img00' />
				</div>
			}

		</React.Fragment>
	)
}


export default Promotionlist
